<template>
    <div id="adminCustomersList">
        <h3>查看客户列表</h3>
        <el-table :data="adminToCustomers" border style="width: 100%">
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="180">
            </el-table-column>
            <el-table-column prop="gender" label="性别"> </el-table-column>
            <el-table-column prop="phone" label="联系方式"> </el-table-column>
            <el-table-column prop="IDCard" label="身份证号码">
            </el-table-column>
            <el-table-column prop="salesData[0].name" label="所属销售员">
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 7, 9]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
var { mapActions, mapState, mapMutations } = createNamespacedHelpers(
    "adminCustomers"
);
export default {
    data() {
        return {
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
        };
    },
    computed: {
        //在计算属性中调用辅助函数
        ...mapState([
            "adminToCustomers",
            "total",
            "pages",
            "pageSize",
            "currentPage",
        ]),
    },
    methods: {
        ...mapActions(["getAdminToCustomers"]),
        ...mapMutations(["changePageSize", "changeCurrentPage"]),
        //  改变每页数据的条数
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.changePageSize(val);
            this.getAdminToCustomers();
        },
        //  改变当前页
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.changeCurrentPage(val);
            this.getAdminToCustomers();
        },
    },
    mounted() {
        //  页面加载完成就获取客户列表的客户数据
        this.getAdminToCustomers();
    },
};
</script>

<style>
#adminCustomersList .el-table {
    line-height: 25px;
    text-align: center;
}
#adminCustomersList .el-table th,
.el-table td {
    text-align: center;
}
.lh {
    line-height: 50px;
}
#adminCustomersList .el-pagination {
    margin: 20px 0px;
}
#adminCustomersList > h3 {
    margin: 10px 0px;
}
</style>